<template>
  <el-form-item :label="nick">
    <el-select @change="sendName" placeholder="输入关键字搜索" v-model="companyName" multiple :filter-method="dataFilter">
      <el-option
        v-for="(item,index) in allCompanyFilterData"
        :key="item.id"
        :label="item.name"
        :value="index"
      ></el-option>
    </el-select>
  </el-form-item>
</template>

<script>
import Http from "../libs/http.js";
export default {
  name: "RoleSelect",
  data() {
    return {
      nick: this.labelName,
      companyName: null,
      allCompany: [],
      selected: [],
      allCompanyFilterData: []
    };
  },
  props: ["p_value", ":p_name", "labelName"],
  created() {
    this.getall();
  },
  watch: {
    p_value(ids) {
      this.selected = ids;
      //  this.intselect(ids);
    }
  },
  methods: {
    intselect(ids) {
      console.log(ids);
      this.companyName = new Array();
      ids.forEach(item => {
        let v = this.getIndexById(item);
        this.companyName.push(v);
      });
      console.log(this.companyName);
    },
    dataFilter(val) {
      if (val) {
        this.allCompanyFilterData = this.allCompany.filter(item => {
          if (
            pinyinUtil.getFirstLetter(item.name).indexOf(val.toUpperCase()) !=
            -1
          ) {
            return true;
          }
        });
      } else {
        this.allCompanyFilterData = this.allCompany;
      }
    },
    sendName(indexs) {
      console.log(indexs);
      let valueArr = new Array();
      let nameArr = new Array();
      for (let i in indexs) {
        let item = this.allCompanyFilterData[indexs[i]];
        valueArr.push(item.id);
        nameArr.push(item.name);
      }
      this.$emit("update:p_value", valueArr);
      this.$emit("update:p_name", nameArr);
    },
    getall() {
      Http.api.get("role/list").then(res => {
        this.allCompany = res.data;
        this.allCompanyFilterData = this.allCompany;
        this.intselect(this.selected);
      });
    },
    getIndexById(id) {
      for (let index in this.allCompanyFilterData) {
        if (this.allCompanyFilterData[index].id == id) {
          return Number(index);
        }
      }
    }
  }
};
</script>

